<template>
  <!--列表 -->
  <div class="flex-1 flex relative overflow-hidden">
    <BaseList :data-source="dataSource" :loading="loading" class="flex-1 overflow-scroll pb-10 list-style">
      <template #renderItem="{ item }">
        <div
          :key="item.tcid"
          class="py-2 px-3 flex justify-between items-center list-items"
          :class="{ active: store.currentSuit?.tcid === item.tcid }"
          @click="onSelect(item)"
        >
          <div :class="preview ? 'w-full' : 'w-[80%]'">
            <div class="name font-bold mr-2">{{ item.mc }}</div>
            <div v-if="templateType !== 4 && !isArmy" class="mt-2 name text-sm !text-gray">
              <template v-if="item.enablePackagePricing">
                <span>套餐价 </span>
                <span>￥{{ item.tcPrice || 0 }}</span>
              </template>
              <template v-else>
                <span>明细价 </span>
                <span>￥{{ item.tcOriginalPrice || 0 }}</span>
              </template>
            </div>
          </div>
          <div v-if="!preview" class="dropdown ml-1 -mr-1">
            <a-dropdown :key="item.tcid">
              <div class="px-2 py-1 hover:bg-gray-300 rounded flex items-center"><EllipsisOutlined :style="{ fontSize: '18px' }" /></div>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="1"> <BaseButton size="small" type="link" @click="onOpenAdd(item)">编辑</BaseButton> </a-menu-item>
                  <a-menu-item key="2">
                    <BaseButton confirm-text="确认删除？" danger size="small" type="link" @click="onDelete(item)">删除</BaseButton>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </div>
      </template>
    </BaseList>
    <a-card class="absolute bottom-0 w-full">
      <BaseButton v-if="!preview" type="primary" block ghost :icon="h(PlusOutlined)" @click="onOpenAdd()">
        新增{{ ['处置套餐', '处方套餐', '协定方', '就诊套餐', '模板'][templateType] }}
      </BaseButton>
    </a-card>
    <AddModal v-model:open="openAdd" :template-type="templateType" :row-data="rowData" :mrm-code="mrmCode" :mrm-name="mrmName" @success="getData" />
    <!-- 协定方新增 -->
    <TcmAdd v-model:open="openTcmAdd" :row-data="rowData" @success="getData" />
  </div>
</template>
<script setup>
import { computed, ref, watch, h } from 'vue'
import { message } from 'ant-design-vue'
import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons-vue'
import { post } from '@/utils/request'
import useDoctorStore from '../store'
import AddModal from './AddModal'
import TcmAdd from './TcmAdd.vue'

const store = useDoctorStore()
const emit = defineEmits(['select'])
const props = defineProps({
  preview: {
    description: '是否预览模式',
    type: Boolean,
    default: false
  },
  isOptician: {
    description: '是否视光',
    type: Boolean,
    default: false
  },
  templateType: {
    description: '模板类型 0-处置 1-处方 2-协定方 3-就诊套餐 4-病历',
    type: Number,
    default: null
  },
  suitType: {
    description: '套餐类型 ""-全部 0-个人 1-科室 2-全院',
    type: String,
    default: ''
  },
  mrmCode: {
    description: '病历类型',
    type: String,
    default: ''
  },
  searchKey: {
    description: '搜索关键字',
    type: String,
    default: ''
  },
  mrmName: {
    description: '模板病例分类',
    type: String,
    default: ''
  },
  searchParams: {
    description: '请求入参',
    type: Object,
    default: () => ({})
  },
  selectDefault: {
    description: '判断是否继续选中当前项',
    type: Boolean,
    default: false
  }
})
const openAdd = ref(false)
const openTcmAdd = ref(false)
const rowData = ref(null)
const params = computed(() => {
  return {
    czcf: props.templateType,
    sylb: props.suitType,
    mrmCode: props.mrmCode,
    isOptician: props.isOptician ? '1' : null,
    tclb: 0,
    zjm: props.searchKey,
    ...props.searchParams
  }
})
const { loading, dataSource, getData } = useFetch({
  url: '/outp/template/getClinicalOrderPackageList',
  params,
  onSuccess: (data) => {
    if (props.selectDefault) {
      if (Object.keys(store.currentSuit).length > 0) {
        const rowArray = data.filter((item) => {
          return item.tcid === store.currentSuit?.tcid
        })
        emit('select', rowArray?.[0] || {})
        store.currentSuit = rowArray?.[0] || {}
      } else {
        emit('select', data?.[0] || {})
        store.currentSuit = data?.[0] || {}
      }
    } else {
      emit('select', data?.[0] || {})
      store.currentSuit = data?.[0] || {}
    }
  }
})
watch(
  () => [props.templateType, props.suitType, props.mrmCode],
  () => getData(),
  { immediate: true }
)
const onOpenAdd = (row = {}) => {
  if (props.templateType === 2) {
    //协定方
    rowData.value = row
    openTcmAdd.value = true
  } else {
    rowData.value = row
    openAdd.value = true
  }
}
const onDelete = async (row) => {
  const { code, msg } = await post('/outp/template/doDelClinicalOrderPackage', {
    tcid: row.tcid
  })
  if (code !== 0) return message.error(msg)
  message.success('删除成功')
  getData()
}
const onSelect = (select) => {
  store.currentSuit = select
  emit('select', select)
}
defineExpose({
  getData
})
const isArmy = getSystemConfig('NAVYHIS_MODE') === '1' //军用系统
</script>
<style lang="less" scoped>
.list-box::-webkit-scrollbar {
  display: inline !important;
  width: 5px;
  height: 12px;
}
.list-items {
  cursor: pointer;
  &:hover {
    .dropdown {
      visibility: visible;
    }
  }
  &.active {
    .name {
      color: var(--primary-color);
    }
  }
  .dropdown {
    visibility: hidden;
    transition: all 0.3s;
  }
}
</style>
